<span
  class="fui-timepicker"
  cdkOverlayOrigin
  #origin="cdkOverlayOrigin"
  #trigger
>
  <input
    readonly
    class="fui-timepicker-input"
    (click)="show()"
    (blur)="onTouched()"
    [value]="value | date:format"
  >
  <span class="fui-timepicker-icon" (click)="show()">
    <svg fuiIcon="clock" color="secondary"></svg>
  </span>
</span>
<ng-template
  cdkConnectedOverlay
  cdkConnectedOverlayHasBackdrop
  cdkConnectedOverlayBackdropClass="fui-timepicker-backdrop"
  [cdkConnectedOverlayPositions]="positions"
  [cdkConnectedOverlayOrigin]="origin"
  (backdropClick)="hide()"
  (detach)="hide()"
  (positionChange)="onPositionChange($event)"
  [cdkConnectedOverlayOpen]="visible | async"
>
  <div
    class="fui-timepicker-panel"
    [@dropdownAnimation]="direction"
  >
    <fui-timepicker-inner
      [allowHour]="allowHour"
      [allowMinute]="allowMinute"
      [allowSecond]="allowSecond"
      [(ngModel)]="value"
      (ngModelChange)="onTimeChange()"
    ></fui-timepicker-inner>
  </div>
</ng-template>
